[Edge] シンボルインスタンスの動的な生成

シンボルインスタンスを動的に生成するサンプルを解説します。

シンボル操作は、Composition インスタンスのメソッドを使用します。Composition インスタンスは、トリガーやアクションにおいては sym.composition で取得できます。メソッドは以下の通りです。

comp.getStage()
Stageのシンボルインスタンスを返します。内部的には Stage もシンボルなんですね。

comp.getSymbols( symbolName )
指定したシンボルの全てのインスタンスの配列を返します。

comp.createSymbolChild ( symbolName, parentSelector , index)
第一引数で 指定したシンボルの新規インスタンスを、第二引数で指定したセレクタで参照されるエレメント内に作成します。戻りは作成されたシンボルインスタンス配列です。セレクタが複数のエレメントを参照する場合、それぞれのエレメント内にインスタンスが作成される、という事のようです。また、第三引数で index を指定すると、さらにその中の特定のエレメントだけが対象になると思われますが、使いどころが難しそうです。

これらの機能を利用して、以下の機能を実装してみます。

• マウスを移動した軌跡に円形のシンボルインスタンスを作成する。
• シンボルは生成されると同時に Stage 下端へ向けて落下し、徐々に透明になりながらバウンドした後、静止して消える。

まずシンボルを実装します。円を書いてシンボル化（名前は Circle にします）した後、シンボル内のタイムラインのInsert Triggerアイコンをクリックして、0フレーム目のトリガー内にシンボルの振る舞いを記述します。

sym.setParameter(
	"fall",
	function(){
		var stageHeight = sym.composition.getStage().element.height();
		var thisHeight = sym.element.height();
		var thisTop = sym.element.position().top;
		var duration = Math.sqrt(stageHeight - thisTop) * 100;
		var animateParam = {top: stageHeight - thisHeight, opacity: 0.2};
		var callback = function() {sym.deleteSymbol();};
		sym.element.animate(animateParam, duration, "easeOutBounce", callback);
	});

Edge には今のところメソッドを直接記述する方法が無いようなので、sym.setParameter() を使って、シンボルのパラメータとしてメソッドを設定してみました。もっと賢くやれる方法があるといいのですが。

次は、stage にマウス移動のアクションを記述します。Elements パネルで、stage の行頭の Open Actions アイコンをクリックして、mousemove アクションを作成します。

var mySymbolObject = sym.composition.createSymbolChild("Circle", sym.element)[0];
mySymbolObject.element.css("position", "absolute");
mySymbolObject.element.css("left", e.clientX - mySymbolObject.element.width() / 2);
mySymbolObject.element.css("top", e.clientY - mySymbolObject.element.height() / 2);
mySymbolObject.getParameter("fall")();

インスタンスを stage の子として作成した後、マウス位置に移動し、先程実装したメソッドを呼び出す処理を記述しました。

シンボルインスタンスの動的な生成を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

各種ブラウザで実行してみましたが、Firefox は重すぎてまともに動かなかったです。Safari は mousemove のイベントが意図したとおりに起こらないのでやや残念な感じ。Chrome と IE9 では問題なく動きました。Chrome の方が少し滑らかです。
AS3 のようなクラスベースの言語とはいろいろ作法が違うので、Flash と同じ事をやろうとするといろいろ工夫が必要ですね。